import { Radio, Card, List, Avatar, Tag } from 'antd'
import React, { useState, useEffect } from 'react'
import { ListItemTag, ClassifyTow } from '../../Emnu'
import { ListItem } from '../../interface'
import { useNavigate } from 'react-router-dom'

import {
    apigetClassify,
    apigetClassifyTow,
    apigetList
} from '../../api'

interface classifyItem {
    type: string,
    title: string,
    id: number
    towtype?: string
}


const Main = () => {
    // 一级分类的选中值
    const [value, setValue] = useState('all')

    // 二级分类选中的值
    const [towValue, setTowValue] = useState('')

    // 一级分类列表
    const [classifyList, setClassifyList] = useState([])

    // 二级分类列表
    const [classifyTowList, setClassifyTowList] = useState([])

    // 列表数据
    const [list, setList] = useState([])

    const navigate = useNavigate()

    const onChange = (data: any) => {
        // 以及分类的筛选
        setValue(data.target.value)

        // 清空二级筛选
        setTowValue('')

    }

    // 获取分类 以及列表
    useEffect(() => {
        // 一级分类
        getClassify()

        // 获取列表数据
        getList()
    }, [])


    // 当一级分类发送变化的时候
    useEffect(() => {
        // 二级分类
        getClassifyTow()

        // 更新列表
        getList()
    }, [value])

    // 监听二级分类的变化
    useEffect(() => {
        // 更新列表
        getList()
    }, [towValue])

    // 获取一级分类
    const getClassify = () => {
        apigetClassify().then(res => {
            setClassifyList(res.data)

        })
    }

    // 二级分类
    const getClassifyTow = () => {
        apigetClassifyTow({ type: value }).then((res) => {
            setClassifyTowList(res.data)
        })
    }

    // 获取列表数据
    const getList = () => {
        // 将一级分类和二级分类发送给后端
        apigetList({value, towValue}).then(res => {
            setList(res.data)
        })
    }

    // 跳转详情
    const toDetail = (item:ListItem) => {
        navigate(`/detail/${item.id}`)
    }

    return <div>
        <Card title="分类">
            <Radio.Group onChange={onChange} value={value}>
                <Radio value='all'>全部</Radio>
                {
                    classifyList.length && classifyList.map((item: classifyItem, idx: number) => {
                        return <Radio key={idx} value={item.type}>{item.title}</Radio>
                    })
                }
            </Radio.Group>
        </Card>
        <Card title="二级分类">
            <Radio.Group onChange={(e: any) => setTowValue(e.target.value)} value={towValue}>
                {
                    classifyTowList.length && classifyTowList.map((item: classifyItem, idx: number) => {
                        return <Radio key={idx} value={item.towtype as string}>{item.title}</Radio>
                    })
                }
            </Radio.Group>
        </Card>

        <Card title="列表" >
            <List
                dataSource={list}
                renderItem={(item: ListItem) => (
                    <List.Item
                        key={item.title}
                        onClick={() => toDetail(item)}
                    >
                        <div>
                            <h3>{item.title}</h3>
                            <div className="list-item">
                                <img className="list-item-img" src={item.img} />
                                <div>
                                    <p>{item.info}</p>
                                    <Tag color="blue">{ListItemTag[item.classify]}</Tag>
                                    <Tag color="red">{ClassifyTow[item.classifytow]}</Tag>
                                    <div>作者：{item.username}</div>
                                </div>
                            </div>
                        </div>
                    </List.Item>
                )}
            />
        </Card>
    </div>
}

export default Main